<template>
  <div >
    <ul  v-if="data.length" class="images_container" >
      <li v-if="!isDelete" v-for="item in data" class="img_item" :class="{isChecked:item.id === currentSelectId}" :key="item.id" @click="selected(item)">
        <i v-if="isManage" class="el-icon-error delete_icon" @click.stop="del(item)"></i>
        <img :src="item.url ? item.url : item.imgUrl" alt />
        <div v-if="item.title">{{ item.title }}</div>
        <div v-else-if="item.name">{{ item.name }}</div>
      </li>
      <!-- <li v-else v-for="item in data" class="img_item" :class="{isChecked:item.id === currentSelectId}" :key="item.id" @click="selected(item)">
        <img :src="item.url" alt />
        <div>{{ item.title + "1234" }}</div>
      </li> -->
    </ul>
    <p v-else  class="images_container" style="text-align:center;line-height:100px">
        当前分类还没有图片哦！
    </p>
  </div>
</template>

<script>
export default {
  name:"imgsList",
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        isDelete:"",
        isManage:Boolean
    },
    data() {
      return {
        currentSelect: '',
        currentSelectId:""
      }
    },
  
    methods: {
      selected(data) {
        if(this.isManage){
          return 
        }
        if(this.currentSelectId === data.id){
          this.currentSelectId = ""
          this.currentSelect = ""
        }else{
          this.currentSelect = data;
          this.currentSelectId = data.id;
        }
      },
      clearSelcted(){
        this.currentSelect = this.currentSelectId = "";
      },
      del(item){
          this.$confirm("确定删除此图片？","提示",{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(()=>{
            this.$api.get("/img/del",{id:item.id},res=>{
              this.$message.success("删除成功")
              // 不需要本地删除
              // this.$bus.$emit("delImgItem",item)
              // 重新获取图片列表
              if(this.data.length == 1){
                this.$bus.$emit("fetchList","isLastImg")
              }else{
                this.$bus.$emit("fetchList")
              }
            },err=>{
              this.$message.error("删除失败")
            })
          }).catch(()=>{
              this.$message.success("取消删除")

          })
      }
    },
    
    watch: {
      isManage(n){
        if(n){
          this.currentSelect = '';
          this.currentSelectId = "";
        }
      },
      isDelete(newValue, oldValue) {
        console.log('newValue :', newValue);
      }
    },
};
</script>

<style lang="scss" scoped>
.images_container {
    padding: 6px 0;
    height: 380px;
    overflow: hidden;
    .isChecked{
      border: 2px solid $color-blue;
    }
    .img_item {
        position: relative;
        width: 115px;
        height: 115px;
        margin: 8px 4px 0px;
        display: inline-block;
        background: #ddd;
        .delete_icon{
          position:absolute;
          right:0;
          top:0;
          color:red;
          font-size:20px;
        }
        &:hover {
          cursor: pointer;
            div {
                height: 30px;
                transition: all 0.4s;
            }
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            vertical-align: middle;
        }
        div {
            position: absolute;
            text-align: center;
            height: 0px;
            color: #fff;
            font-size: 14px;
            line-height: 30px;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.3);
        }
    }
}
</style>